<template>
    <div class="goodsinfo-container">

        <!--由于实现的是半场动画所以只能用钩子函数不能用类  -->
        <transition
            @before-enter="beforeEnter"
            @enter="Enter"
            @after-enter="afterEnter">
            <div class="ball" v-show="ballflag" ref="ball"></div>
        </transition>
        

        <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<swiper :lunbotuList="lunbotu" :isfull="false"></swiper>
					</div>
				</div>
		</div>
        


        <div class="mui-card">
				<div class="mui-card-header">{{goodsinfo.title}}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p class="price">
                            市场价：<del>￥{{goodsinfo.market_price}}</del>&nbsp;&nbsp;销售价：<span
                            class="now_price">￥{{goodsinfo.sell_price}}</span>
                        </p>
                        <p>
                            购买数量：<numbox @getcount="getSelectCount"
                            :max="goodsinfo.stock_quantity"></numbox>
                        </p>
                        <p>
                            <mt-button type="primary" size="small">立即购买</mt-button>
                            <mt-button type="danger" size="small" @click="addcar">加入购物车</mt-button>
                        </p>
					</div>
				</div>
		</div>


        <div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>商品货号：{{goodsinfo.goods_no}}</p>
                        <p>库存情况：{{goodsinfo.stock_quantity}}</p>
                        <p>上架时间：{{goodsinfo.add_time | dateFormat}}</p>
					</div>
				</div>
				<div class="mui-card-footer">
                    <mt-button type="primary" size="large" plain @click="goDesc(id)">图文介绍</mt-button>
                    <mt-button type="danger" size="large" plain @click="goComment(id)">商品评论</mt-button>
                </div>
			</div>

    </div>
</template>

<script>

import swiper from '../subcomponents/swiper.vue'

import numbox from '../subcomponents/goodinfo-navbox.vue'

export default {
    data(){
        return {
            id:this.$route.params.id,
            lunbotu:[],
            goodsinfo:{},
            ballflag:false,//控制小球隐藏
            selectCount:1
        }
    },
    created(){
        this.getLunbotu(),
        this.getGoodsInfo()
    },
    methods:{
        getLunbotu(){
            this.$http.get('api/getthumimages/'+this.id).then(result=>{
                if(result.body.status===0){

                    result.body.message.forEach(item=>{
                        item.img=item.src
                    })
                    this.lunbotu=result.body.message
                }
            })
        },
        getGoodsInfo(){
            this.$http.get('api/goods/getinfo/'+this.id).then(result=>{
                if(result.body.status===0){
                    this.goodsinfo=result.body.message[0]
                }
            })
        },
        goDesc(id){
            this.$router.push({name:'goodsdesc',params:{id}})
        },
        goComment(id){
            this.$router.push({name:'goodscomment',params:{id}})
        },

        
        addcar(){
            this.ballflag=!this.ballflag;
            var goodsinfo = {
                id:this.id,
                count:this.selectCount,
                price:this.goodsinfo.sell_price,
                selected:true
            };
            this.$store.commit("addToCar",goodsinfo);
        },
        beforeEnter(el){
            el.style.transform="translate(0,0)"
        },
        Enter(el,done){
            el.offsetWidth;

            //小球动画不准确的原因 ：1 我们把小球最终位移2到的位置已经局限在了某一分辨率下 滚动条未滚动的情况下
            //2 只要分辨率和测试的时候不一样 或者滚动条滚动了一定的距离后 那么小球的位置会发生偏离
            //3 不能将坐标写死 应该根据不同的情况动态计算这个坐标值
            //4 解决：先得到徽标的横纵坐标，再得到小球的横纵坐标 然后让y值求差 x值也求差 得到的结果就是横纵坐标要位移的距离 
            //获取小球的位置
            const ballPosition =this.$refs.ball.getBoundingClientRect()
            const badgePosition=document.getElementById('badge').getBoundingClientRect()

            const x=badgePosition.left-ballPosition.left
            const y=badgePosition.top-ballPosition.top

            el.style.transform=`translate(${x}px,${y}px)`;
            el.style.transition="all .5s cubic-bezier(.4,-0.3,1,.68) ";
            //cubic-bezier(.4,-0.3,1,.68)
            done()
        },
        afterEnter(el){
            this.ballflag=!this.ballflag
        },
        getSelectCount(count){
            //当子组件把选中的数量传递给父组件的时候 把选中的值保存到data上
            this.selectCount=count
            console.log("father:"+this.selectCount)
        }
    },
    components:{
        swiper,
        numbox
    }
}
</script>


<style lang="scss" scoped>
.goodsinfo-container{
    background-color: #ccc;
    overflow: hidden;
    position: relative;
    .now_price{
        color: red;
    }

    .mui-card-footer{
        display: block;

        button{
            margin: 15px 0;
        }
    }

    .ball{
        position: absolute;
        top: 45%;
        left: 40%;
        width: 15px;
        height: 15px;
        background-color: red;
        border-radius: 50%;
        z-index: 99;
    }
}
</style>